<template>
  <div
    class="area popup-area"
    v-show="show">
      <div class="content" :style="{
        bottom: selfShow ? '0' : '-100%'
      }">
        <div class="title">
          <div class="title-text">区域选择</div>
          <div class="close" @click="close">×</div>
        </div>
        <div class="tabs">
          <template>
            <div class="tab-item"
                 v-if="!isEmptyObject(selected.province)"
                 @click="active = 'province'"
                 :class="{active: active === 'province'}">{{strCut(selected.province.name, 3)}}</div>
            <div class="tab-item"
                 v-else-if="active === 'province'"
                 :class="{active: active === 'province'}">请选择</div>
          </template>
          <template>
            <div class="tab-item"
                 v-if="!isEmptyObject(selected.city)"
                 @click="active = 'city'"
                 :class="{active: active === 'city'}">{{strCut(selected.city.name, 3)}}</div>
            <div class="tab-item"
                 v-else-if="active === 'city' && city.length > 0"
                 :class="{active: active === 'city'}">请选择</div>
          </template>
        </div>
        <div class="items">
          <template v-for="(item,idx) in items">
            <div class="item"
                 v-waves
                 @click="select(item)"
                 :class="{active: selected[active].id === item.id}"
                 :key="idx">{{item.name}}</div>
          </template>
        </div>
      </div>
  </div>
</template>
<script>
export default {
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data () {
    return {
      selfShow: false,
      province: [],
      city: [],
      active: 'province',
      items: [],
      selected: {
        province: {},
        city: {}
      }
    }
  },
  watch: {
    show (val) {
      if (val) {
        this.active = 'province'
        setTimeout(() => {
          this.selfShow = val
        }, 50)
      }
    },
    active (val) {
      switch (this.active) {
        case 'province':
          this.items = this.province
          this.selected.city = {}
          break
        case 'city':
          this.items = this.city
          break
      }
    }
  },
  methods: {
    /**
     *  点击列表选择区域
     */
    select (item) {
      this.selected[this.active] = item
      switch (this.active) {
        case 'province':
          this.active = 'city'
          break
        case 'city':
          this.$emit('checked', this.selected.city)
          this.close()
          return false
      }
      this.getData(item.id)
    },
    /**
     * @purpose 获取数据
     * @param pid
     */
    getData (pid) {
      let auto = setTimeout(() => {
        this.showLoading()
      }, 1000)
      this.items = []
      switch (this.active) {
        case 'province':
          this.province = []
          break
        case 'city':
          this.city = []
          break
      }
      this
        .$api
        .area
        .items(pid)
        .then(r => {
          clearTimeout(auto)
          this.closeLoading()
          if (r.length < 1) {
            // 关闭
            this.$emit('checked', this.selected)
            this.close()
            return false
          }
          switch (this.active) {
            case 'province':
              this.items = this.province = r
              break
            case 'city':
              this.items = this.city = r
              break
          }
        })
    },
    // 关闭弹窗
    close () {
      this.selfShow = false
      setTimeout(() => {
        this.$emit('update:show', false)
      }, 300)
    }
  },
  created () {
    this.getData()
  }
}
</script>
<style scoped lang="sass">
  .area
    width: 100%
    height: 100%
    position: fixed
    top: 0
    left: 0
    z-index: 99
    background-color: rgba(0,0,0,0.6)
    .content
      width: 100%
      height: calc(100% - 50px)
      background-color: #ffffff
      transition: all .3s
      position: absolute
      bottom: -100%
      left: 0
      -webkit-backface-visibility: hidden
      -moz-backface-visibility: hidden
      -ms-backface-visibility: hidden
      backface-visibility: hidden
      -webkit-perspective: 1000
      -moz-perspective: 1000
      -ms-perspective: 1000
      perspective: 1000
      .title
        width: calc(100% - 20px)
        padding: 0 10px
        background-color: #f3f3f3
        height: 3rem
        display: flex
        align-items: center
        .title-text
          flex: 1
          font-size: 1rem
        .close
          width: 3rem
          height: 3rem
          display: flex
          align-items: center
          justify-content: flex-end
          font-size: 1.5rem
      .tabs
        width: calc(100% - 20px)
        padding: 0 10px
        height: 3rem
        border-bottom: 1px solid #f3f3f3
        display: flex
        align-items: center
        .tab-item
          padding: 0 20px
          margin-top: 1px
          height: 100%
          display: flex
          align-items: center
          border-bottom: 1px solid #f3f3f3
          &:first-child
            padding: 0
          &:nth-child(2)
            margin-left: 10px
          &.active
            border-bottom-color: #ff4700
            color: #ff4700
      .items
        width: 100%
        height: calc(100% - 6rem)
        overflow-x: hidden
        overflow-y: auto
        overflow-scrolling: touch
        -webkit-overflow-scrolling: touch
        .item
          width: calc(100% - 20px)
          padding: 0 10px
          height: 3rem
          display: flex
          align-items: center
          font-size: 1rem
          &.active
            color: #ff4700
</style>
